<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区域联动</title>
    <style>
          select{
            width: 80px;
          }
    </style>
</head>
<body>
     <span>省：</span>
     <select id="pro">
         <option value="0">请选择</option>
     </select>

     <span>市:</span>
     <select id="city">
         <option value="0">请选择</option>
     </select>

     <script src="city.data-3.js"></script>
     <script>
      var pro = document.getElementById('pro');

      var city = document.getElementById('city');

      var len = cityData3.length,htmlp = ['<option value="0">请选择</option>'],htmlC;
      for(var i = 0;i<len;i++) {
        htmlp.push(
            '<option value="',cityData3[i].value,'">',
              cityData3[i].text,
            '</option>'
            )
      }
      pro.innerHTML = htmlp.join('');


      pro.onchange = function(){
        var val = pro.value;
        htmlC = ['<option value="0">请选择</option>'];
        for(var o in cityData3){
            if(cityData3[o].value == val) {
                for(var k in cityData3[o].children) {
                    htmlC.push(
                        '<option value="',cityData3[o].children[k].value,'">',
                          cityData3[o].children[k].text,
                          '</option>'

                        )
                }
            }
        }
        city.innerHTML = htmlC.join('');
      }
     </script>
</body>
</html>